<template>
	<div class="luck-page">
		<img style="width: 0;height: 0;" src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/share_logo.jpg" alt="">
		<div class="rule-btn" @click="giffShow = true">
			<span>活<br>动<br>奖<br>品</span>
		</div>
		<div class="rule-btn second-btn" @click="ruleShow = true">
			<span>活<br>动<br>规<br>则</span>
		</div>
		<div class="rule-btn three-btn" @click="showPost = true">
			<span>活<br>动<br>海<br>报</span>
		</div>
<!-- 		<div class="yun-left">
			<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/yun_left.png" alt="">
		</div>
		<div class="yun-right">
			<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/yun_right.png" alt="">
		</div> -->
		<div class="priz-bg">
			<div class="lamp">
				<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/lamp1.png" v-show="showLamp" alt="">
				<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/lamp2.png" v-show="!showLamp" alt="">
			</div>
			<div class="giff-list">
				<div class="giff-item" :style="{'transform': 'rotate('+item.rotate+'deg)'}" v-for="item in list">
					<div class="item-name">{{item.prizeName}}</div>
					<!-- <div class="item-num">(剩余:{{item.quantity}})</div> -->
					<div class="item-img">
						<img :src="item.image" alt="">
					</div>
				</div>
			</div>
			<div class="priz-btn" :style="{'transform': 'rotate('+pointerRotate+'deg)'}" @click="priz">
				<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/luck_btn2.png" alt="">
			</div>
		</div>
		<div class="my-giff-btn">
			<div class="giff-btn" @click="queryMyGiff(0)">
				我的奖励
			</div>
		</div>
		<van-popup v-model="giffShow" class="giff-popup" round position="bottom">
			<div class="giff-cont">
				<div class="close" @click="giffShow=false">
					<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/close_btn.png" alt="">
				</div>
				<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/giff_bg.png" alt="">
			</div>
		</van-popup>
		<van-popup v-model="ruleShow" class="giff-popup" round position="bottom">
			<div class="giff-cont">
				<div class="close" @click="ruleShow=false">
					<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/close_btn.png" alt="">
				</div>
				<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/rule_bg.png" alt="">
			</div>
		</van-popup>
<!-- 		<van-popup v-model="giffShow" round position="bottom">
			<div class="popup-title">
				<img class="rule-title-img" src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/make_img_popupTitle1.png" alt="">
				<div class="close" @click="giffShow=false">
					<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/make_icon_close.png" alt="">
				</div>
			</div>
			<div class="popup-cont">
				<div class="rule-item" v-for="item in giffList">
					<div class="item-icon">
						<img :src="item.image" alt="">
					</div>
					<div class="item-cont">
						<div class="item-title">{{item.prizeName}}</div>
						<div class="item-intro">{{item.aaaexplain}}</div>
					</div>
				</div>
			</div>

		</van-popup> -->
<!-- 		<van-popup v-model="ruleShow" round position="bottom">
			<div class="popup-title">
				<img class="rule-title-img" src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/make_img_popupTitle.png" alt="">
				<div class="close" @click="ruleShow=false">
					<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/make_icon_close.png" alt="">
				</div>
			</div>
			<div class="popup-cont">
				<div class="rule-item" v-for="item in ruleList">
					{{item}}
				</div>
			</div>

		</van-popup> -->
		<van-popup v-model="loginModel" overlay-class="aaaa">
			<div class="login-cont">
				<div class="popup-header">
					<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/login.gif" alt="">
				</div>
				<div class="login-hint">登录</div>
				<div class="login-form">
					<van-field v-model="phone" label="手机号" placeholder="请输入手机号"></van-field>
					<van-field v-model="sms" maxlength="6" center clearable label="验证码" placeholder="请输入短信验证码">
						<van-button slot="button" size="mini" :disabled="!cansms" type="info"
							@click="getSms">{{smsTxt}}</van-button>
					</van-field>
					<van-cell>
						<van-button style="margin-top: .3rem;" type="info" block @click="login">登录</van-button>
					</van-cell>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="showMyGiff" @closed="write=false">
			<div class="my-giff">
				<div class="giff-name">{{myGiff.prizeName}}</div>
				<div class="giff-subheader">{{myGiff.aaaexplain}}</div>
				<div class="giff-img" v-if="!write">
					<img :src="myGiff.image || myGiff.prizeImage" alt="">
				</div>
				<div class="giff-img" v-else>
					<img :src="myGiff.qrcode" alt="">
				</div>
				<div class="write-off" @click="queryOff" v-if="myGiff.extend0 == 0">
					立即兑奖
				</div>
			</div>
		</van-popup>
		<van-popup v-model="showPost">
			<div class="poster-cont">
				<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/poster.jpg" alt="">
			</div>
			<div class="poster-btn">
				长按图片分享
			</div>
		</van-popup>
	</div>

</template>

<script>
	import {
		Dialog,
		Cell,
		CellGroup,
		Field,
		Button,
		Popup,
		Toast
	} from 'vant'
	import axios from 'axios'
	import VConsole from 'vconsole';
	import wx from "weixin-js-sdk";
	export default {
		data() {
			return {
				baseUrl: 'http://81.70.216.192:19130/spacelink',
				startRun: false,
				canRun: true,
				showLamp: false,
				lampTime: null,
				token: localStorage.getItem("sm_token"),
				list: [],
				ruleList: [],
				giffList: [],
				loginModel: false,
				phone: '',
				sms: '',
				smsTime: null,
				cansms: true,
				pointerRotate: 0,
				smsTxt: '发送验证码',
				myGiff: {},
				showMyGiff: false,
				write: false,
				giffShow: false,
				ruleShow: false,
				showPost: false
			}
		},
		created() {
			// new VConsole();
			this.getWxConfig()
			this.queryGiffList()
		},
		methods: {
			getWxConfig() {
				axios({
					url: this.baseUrl + '/api/h5/get/wxshare',
					method: 'GET',
				}).then(response => {
					let res = response.data
					let data = res.data
					console.log(data)
					wx.config({
						debug: false,
						appId: data.appId, // 必填，公众号的唯一标识
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						nonceStr: data.nonceStr, // 必填，生成签名的随机串
						signature: data.signature, // 必填，签名
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必
					})
					wx.ready(function() {
						console.log('wx.ready')
						wx.updateAppMessageShareData({
							title: '忠和黄酒', // 分享标题
							desc: '房县黄酒上餐桌 万瓶佳酿送全城', // 分享描述
							link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/share_logo.jpg', // 分享图标
							success: function() {
								console.log(11111)
								// 设置成功
							}
						})
						wx.updateTimelineShareData({
							title: '忠和黄酒,房县黄酒上餐桌 万瓶佳酿送全城', // 分享标题
							link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/share_logo.jpg', // 分享图标
							success: function() {
								console.log(22222)
								// 设置成功
							}
						})
					});
				})
			},
			queryMyGiff(status) {
				axios({
					url: this.baseUrl + '/api/h5user/query/userprize',
					method: 'GET',
					headers: {
						authorization: this.token
					}
				}).then(res => {
					let data = res.data
					if (data.code == 200) {
						this.myGiff = data.userprize
						console.log(status)
						if (status) {
							this.write = true
						} else {
							console.log(11111)
							this.showMyGiff = true
						}

					} else if (data.code == 401) {
						this.showLogin()
					} else {
						Toast(data.msg)
					}
				}).catch(err => {})
			},
			getSms() {
				if (!this.cansms) {
					return false
				}
				if (!this.phone) {
					Toast('请输入正确手机号码')
					return false
				}
				this.cansms = false
				axios({
					url: this.baseUrl + '/api/h5/send/sms',
					method: 'GET',
					params: {
						phoneNumber: this.phone
					}
				}).then(res => {
					let data = res.data

					if (data.code == 200) {
						this.smsTxt = 60
						this.setSmsTime()
					} else {
						this.cansms = true
					}
				}).catch(err => {
					this.cansms = true
				})
			},
			setSmsTime() {
				clearTimeout(this.smsTime)
				if (this.smsTxt == 0) {
					this.cansms = true
					this.smsTxt = '发送验证码'
				} else {
					this.smsTxt = this.smsTxt - 1
					this.smsTime = setTimeout(() => {
						this.setSmsTime()
					}, 1000)
				}
			},
			queryGiffList() {
				axios({
					method: 'GET',
					url: this.baseUrl + '/api/h5/prize/list'
				}).then(res => {
					let data = res.data
					if (data.code == 200) {
						let list = data.list
						for (let i = 0; i < list.length; i++) {
							list[i].rotate = 360 / list.length * i + 22.5
						}
						this.list = data.list
						this.ruleList = data.rulelist
						this.giffList = data.prizename
					}
				})
			},
			queryOff() {
				if (this.myGiff.qrcode) {
					this.write = true
				} else {
					this.queryMyGiff(1)
				}

			},
			priz() {
				// let list = this.list,
				// 	select = 3,
				// 	index = list.findIndex(item => {
				// 		return item.recId == select
				// 	}),
				// 	skewing = Math.floor(Math.random() * 7 + 2) / 10 * 45,
				// 	angle = 45 * (index + 1) - skewing + 1800
				// console.log(index)
				// this.pointerRotate = angle
				// return
				if (!this.canRun) {
					return false
				}
				this.canRun = false
				if (this.token) {
					this.drawPrize()
				} else {
					this.showLogin()
				}
			},
			rotateFunc(award, data) { //awards:奖项，angle:奖项对应的角度
				var angle = 360 / data.length
				var skewing = Math.floor(Math.random() * 7 + 2) / 10 * angle
				$('.arrow').stopRotate();
				$('.arrow').rotate({
					angle: 0,
					duration: 7000,
					animateTo: award * angle - skewing + 1800, //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
					callback: function() {
						this.canRun = true
					}
				})
			},
			drawPrize() {
				this.pointerRotate = 0
				this.lampChange()
				axios({
					url: this.baseUrl + '/api/h5user/add/prize',
					method: 'GET',
					headers: {
						authorization: this.token
					}
				}).then(res => {
					this.canRun = true
					let data = res.data
					if (data.code == 200) {
						let list = this.list,
							select = data.prize.recId,
							index = list.findIndex(item => {
								return item.recId == select
							}),
							skewing = Math.floor(Math.random() * 7 + 2) / 10 * 45,
							angle = 45 * (index + 1) - skewing + 1800
						this.pointerRotate = angle
						this.myGiff = data.prize
						setTimeout(() => {
							clearTimeout(this.lampTime)
							this.showMyGiff = true
						}, 4500)
					} else if (data.code == 401) {
						clearTimeout(this.lampTime)
						this.showLogin()
					} else {
						clearTimeout(this.lampTime)
						Toast(data.msg)
					}
				}).catch(err => {
					clearTimeout(this.lampTime)
					this.canRun = true
				})
			},
			lampChange() {
				clearTimeout(this.lampTime)
				this.lampTime = setTimeout(() => {
					this.showLamp = !this.showLamp
					this.lampChange()
				}, 500)
			},
			showLogin() {
				this.loginModel = true
			},
			login() {
				if (!this.phone) {
					Toast('请输入手机号');
					return false
				}
				if (!this.sms) {
					Toast('请输入验证码');
					return false
				}
				axios({
					url: this.baseUrl + '/api/h5/user/login',
					method: 'POST',
					data: {
						"phoneNumber": this.phone,
						"smscode": this.sms,
					}
				}).then(res => {
					let data = res.data
					if (data.code == 200) {
						this.token = data.token
						this.luckNum = data.number4Lucky
						this.canRun = true
						this.loginModel = false
						// this.priz()

						localStorage.setItem("sm_token", data.token, 5)
					} else {
						Toast(data.msg)
					}
				})
			},

		},
		computed: {
			rotateStyle() {
				return {
					transform: `rotate(${this.angle}deg)`
				};
			}
		},
		components: {
			'van-dialog': Dialog,
			'van-cell-group': CellGroup,
			'van-cell': Cell,
			'van-field': Field,
			'van-button': Button,
			'van-popup': Popup
		},
		watch: {

		}
	}
</script>

<style lang="less">
	.luck-page {
		width: 100%;
		min-height: 100vh;
		overflow-x: hidden;
		background: url(https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/bg2.png) no-repeat;
		background-size: 100%;
		background-color: #b81c24;
		padding: 5.6rem 0.25rem .25rem;

		* {
			-webkit-user-select: none;
			/* Safari */
			-moz-user-select: none;
			/* Firefox */
			-ms-user-select: none;
			/* IE/Edge */
			user-select: none;
			/* 标准语法 */
		}

		.my-giff-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: .6rem;

			.giff-btn {
				width: 7rem;
				height: 1rem;
				background-color: #dea250;
				border-radius: 1rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: .3rem;
				box-shadow: 0 4px 10px 1px darkred;
			}
		}

		.rule-btn {
			position: absolute;
			right: 0;
			top: 1.46rem;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: .3rem;
			width: .6rem;
			height: 1.6rem;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #fff;
			border-radius: .14rem 0px 0px .14rem;
			background: linear-gradient(135deg, #FFAB7F 0%, #E95A47 100%);
			font-size: .28rem;
		}

		.second-btn {
			top: 3.24rem;
			background: linear-gradient(135deg, #FF7FB0 0%, #E94772 100%);
		}

		.three-btn {
			top: 1.46rem;
			right: initial;
			border-radius: 0 .14rem .14rem 0;
			left: 0;
			background: linear-gradient(135deg, #FF7FB0 0%, #E94772 100%);
		}

		.yun-left {
			width: 2rem;
			position: absolute;
			top: 5.4rem;
			left: 0;
			z-index: 99;
		}

		.yun-right {
			width: 2rem;
			position: absolute;
			top: 5rem;
			right: 0;
			z-index: 99;
		}

		.priz-bg {
			margin: 0 auto;
			position: relative;
			width: 7rem;
			height: 7.3rem;
			padding: .15rem 0;
			background: url(https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/rotary_bg1.png)no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.priz-bg-img {
			width: 100%;
		}

		.priz-btn {
			position: relative;
			// padding: 0 .43rem 0.43rem;
			width: 3rem;
			z-index: 10;
			transition: transform 4s;
		}

		.lamp {
			position: absolute;
			left: 0.05rem;
			top: 0.05rem;
			width: 6.9rem;
			height: 6.9rem;
			z-index: 2;

			img {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.giff-list {
			width: 6rem;
			height: 6rem;
			position: absolute;
			z-index: 9;
			top: 0.5rem;
			left: 0.5rem;
		}

		.giff-item {
			position: absolute;
			display: flex;
			flex-direction: column;
			/* justify-content: center; */
			align-items: center;
			padding-top: 0.6rem;
			color: #fa5376;
			font-size: 0.24rem;
			/* margin-bottom: 0.2rem; */
			width: 1.8rem;
			height: 3rem;

		}

		.item-name {
			margin-bottom: 0.1rem;
		}
		.item-num{
			font-size: .24rem;
			margin-bottom: .1rem;
		}
		.giff-item:nth-of-type(1) {
			left: 2.9rem;
			top: -.4rem;
		}

		.giff-item:nth-of-type(2) {
			left: 4rem;
			top: .7rem;
		}

		.giff-item:nth-of-type(3) {
			left: 4rem;
			top: 2.2rem;
		}

		.giff-item:nth-of-type(4) {
			left: 2.9rem;
			top: 3.3rem;
		}

		.giff-item:nth-of-type(5) {
			left: 1.3rem;
			top: 3.3rem;
		}

		.giff-item:nth-of-type(6) {
			left: .24rem;
			top: 2.2rem;
		}

		.giff-item:nth-of-type(7) {
			left: 0.2rem;
			top: .8rem;
		}

		.giff-item:nth-of-type(8) {
			left: 1.34rem;
			top: -.4rem;
		}

		.item-img {
			width: 1rem;
		}


		@keyframes myfirst {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.arrow-anmit {
			animation: myfirst 0.4s linear infinite;
			/* Firefox: */
			-moz-animation: myfirst 0.4s linear infinite;
			/* Safari 和 Chrome: */
			-webkit-animation: myfirst 0.4s linear infinite;
			/* Opera: */
			-o-animation: myfirst 0.4s linear infinite;
		}

		.van-popup {
			background-color: rgba(0, 0, 0, 0);
			padding-top: 1rem;
		}

		.login-cont {
			position: relative;
			padding-top: 1rem;
			padding-bottom: .3rem;
			width: 6rem;
			border-radius: 0.3rem;
			background-color: #fff;
		}

		.popup-header {
			padding: .1rem;
			width: 2rem;
			height: 2rem;
			overflow: hidden;
			border-radius: 2rem;
			background-color: #fff;
			position: absolute;
			top: -1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.login-hint {
			font-size: .4rem;
			font-weight: bold;
			padding: 0.2rem 0;
			text-align: center;
			color: #333;
		}

		.login-form {
			padding: .3rem;
		}

		.my-giff {
			width: 7rem;
			height: 9rem;
			background: url(https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/my_giff_bg.png)no-repeat;
			background-size: 120% 140%;
			background-position: center;
			padding: .6rem .3rem .3rem;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
		}

		.giff-name {
			color: #fff;
			font-size: .4rem;
			font-weight: bold;
			margin-bottom: .2rem;

		}

		.giff-subheader {
			color: #fff;
			font-size: .28rem;
			margin-bottom: .2rem;
			width: 4rem;
			text-align: center;
		}

		.giff-img {
			width: 3.4rem;
			height: 3.4rem;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.write-off {
			width: 4rem;
			height: 1rem;
			background-color: #dea250;
			border-radius: 1rem;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: .3rem;
			color: #fff;
			margin-top: .8rem;
		}

		.poster-cont {
			width: 6rem;
		}

		.poster-btn {
			width: 4rem;
			height: 1rem;
			background-color: #9d1f23;
			border-radius: 1rem;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: .3rem;
			color: #fff;
			margin: .8rem auto 0;
		}

		.rule-cont {
			margin-top: .8rem;
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: .2rem;
			padding: 0 .3rem .3rem;
		}

		// .block-title {
		// 	width: 4rem;
		// 	height: .8rem;
		// 	background: url(https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/title_bg.png)no-repeat;
		// 	background-size: 100% 100%;
		// 	margin: 0 auto .3rem;
		// 	transform: translateY(-.15rem);
		// 	display: flex;
		// 	justify-content: center;
		// 	align-items: center;
		// 	color: #ce000f;
		// 	font-size: .3rem;
		// 	font-weight: bold;
		// }

		.rule-item {
			display: flex;
			align-items: center;
			margin-bottom: .3rem;
			color: #fff;
			font-size: .24rem;
		}

		.item-icon {
			width: 1rem;
			height: 1rem;
			margin-right: .2rem;
			background-color: #fff;
			border-radius: .1rem;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.item-title {
			font-size: .28rem;
			margin-bottom: .16rem;
		}

		.van-popup--bottom {
			width: 100%;
			// background-color: #1D1208;
			// background-color: #950304;
		}
		.giff-cont{
			position: relative;
			.close{
				position: absolute;
				top: .3rem;
				right: .3rem;
				width: .4rem;
				height: .4rem;
				// background-color: red;
			}
		}
		
		.popup-title {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0.4rem 0 0.08rem;
		}

		.rule-title-img {
			width: 1.62rem;
		}

		.close {
			width: 0.64rem;
			position: absolute;
			right: 0;
			top: 0.38rem;
		}

		.popup-cont {
			height: 8.5rem;
			padding-top: .4rem;
			overflow-y: auto;
		}
		.van-field__label{
			width: 4em;
		}
	}
</style>